$(function () {

  var form = layui.form
  let layer = layui.layer
  // ********************************************************加载列表

  function getList() {
    $.ajax({
      type: "GET",
      url: "admin/links",
      success: function (res) {
        if (res.status == 0) {
          let str = "";
          res.data.forEach(item => {
            str += `
            <tr>
              <td>${item.id}</td>
              <td>
                <div class="bg">
                  <img src="http://127.0.0.1:3000/uploads/${item.linkicon}">
                </div>
              </td>
              <td>${item.linkname}</td>
              <td>${item.linkurl}</td>
              <td>${item.linkdesc}</td>
              <td>
                <button type="button" class="layui-btn layui-btn-xs edit" edit_id=${item.id}>
              编辑
            </button>
                <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete" del_id=${item.id}>
              删除
            </button>
              </td>
            </tr>
            `;
          });

          $("tbody").html(str);
        }
      }
    });
  }
  getList();


  // *********************************************************删除友情链接



  $("tbody").on("click", ".delete", function (e) {

    //  2.获取对应删除数据id值；
    //     2.1 回到初始化渲染，删除和id绑定在一起！
    //     2.2 自定义属性获取，
    let id = $(this).attr("del_id");
    //  3.删除对应数据 看接口文档  /my/article/deletecate/:id 动态接口
    $.ajax({
      url: "admin/links/" + id,
      type: 'DELETE',
      success: function (res) {
        layer.msg(res.message);
        if (res.status == 0) {
          getList();
        }
      }
    });
  });


  // **********************************************************编辑友情链接


  function getList() {
    $.ajax({
      url: "admin/links",
      type: "GET",
      success: function (res) {

        if (res.status == 0) {
          let str = "";
          // console.log(res.data[1].id);
          res.data.forEach(item => {
            str += `
            
            <tr>
              <td>${item.id}</td>
              <td>
                <div class="bg">
                  <img src="http://127.0.0.1:3000/uploads/${item.linkicon}" >
                </div>
              </td>
              <td>${item.linkname}</td>
              <td>${item.linkurl}</td>
              <td>${item.linkdesc}</td>
              <td>
                <button type="button" class="layui-btn layui-btn-xs edit" _linkid="${item.id}" 
                >
              编辑
            </button>
                <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">
              删除
            </button>
              </td>
            </tr>
  
  
          `;
            // console.log(item.linkicon);
          });
          $("tbody").html(str);
        }
      }
    })
  }
  getList();

  let edit_str = `<form id="edit-form" lay-filter='editForm' class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl" required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc" required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url">
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <input type="file" id="linkFile" style="display: none;">
          <img id="preIcon"  src="">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`;
  $("tbody").on("click", ".edit", function (e) {
    let id = $(this).attr("_linkid");

    layer.open({
      type: 1,
      title: '编辑类别',
      area: ['500px', '350px'],
      content: edit_str,

      // 当弹窗弹出成功时调用这个函数：
      success: (dom, index) => {


        $.ajax({
          url: 'admin/links/' + id,
          success: function (res) {
            form.val('editForm', res.data)
          }
        })



        $("#urlIcon").on('click', function () {
          $("#linkFile").click();
        })

        editSub(index, id)
        // 3.2提交数据：提交修改，知道修改的是哪个数据？根据Id;
        // editSub(index, id);
      }



    });
  });
  // 2.当我们通过系统提供文件夹 打开某个图片时：
  //   建议：收集起来！备注：生僻但是可能会用到的知识！





  function editSub(numb, numb1) {
    console.log(numb);
    console.log(numb1);
    // console.log(numb1);
    $("#edit-form").on("submit", function (e) {
      e.preventDefault();

      // 1.收集数据
      let data = form.val('editForm')

      console.log(data);

      // 2.ajax提交
      $.ajax({
        url: "admin/links/" + numb1,
        type: "PUT",
        data: data,


        success: function (res) {


          layer.msg(res.message);
          if (res.status == 0) {
            // 再次调用列表接口：
            getList();

            // 关闭弹窗：
            layer.close(numb);
          }
        }
      })


    });
  }

  // *********************************************************添加友情链接
  let add_str = `
  <form id="add-form" class="layui-form"  lay-filter="formTest"  style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl" required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc" required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url">
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon" id='up'>&#xe67c;</i>上传图片
          </button>
          <input type="file" name="linkicon" id="linkFile" style="display: none;">
          <img id="preIcon" src="">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`

  // 添加
  let src = "";
  $("#add-link").on('click', function () {
    // 弹窗：非常常用知识！
    layer.open({
      type: 1, // 页面层，弹窗内部设置一些页面结构 HTML结构！
      title: '添加链接', // 左上角显示标题
      area: ['500px', '250px'], // area区域：弹窗宽和高！
      content: add_str, // content:内容？弹窗的内容！HTML结构字符串！
      // 当弹窗弹出成功时调用这个函数：
      success: function (dom, index) {
        // dom 弹窗dom节点！
        // index:弹窗标识；
        // 提交事件： 弹窗成功后：在此函数内部可以获取 form表单元素
        addSub(index);

      }
    });

    // 提交事件：有可能就获取不到form;此时form还是字符串，不是DOM节点！
    // 点击上传图片
    $('#urlIcon').on('click', function () {
      $('#linkFile').click();
    })
  });





  // 提交
  function addSub(numb) {
    $("#add-form").on("submit", function (e) {
      e.preventDefault();
      let formData = new FormData(this);
      $.ajax({
        url: "admin/links",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function (res) {
          layer.msg(res.message);
          if (res.status == 0) {
            // 再次调用列表接口：
            getList();
            // 关闭弹窗：
            layer.close(numb);
          }
        }
      })
    });
  }

})